<template>
  <div>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-breadcrumb separator="/" style=" width: 500px;float: left;height: 60px ;line-height: 60px">
          <el-breadcrumb-item :to="{ path: '/studentInfo' }"><strong style="cursor: pointer">首页</strong></el-breadcrumb-item>

        </el-breadcrumb>
        <el-button @click="insertStudentScore" style="text-align: left;">新增</el-button>
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><span @click="loginOut()">退出</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>{{$store.state.empName}}</span>
      </el-header>


      <!--  表数据-->
      <el-main>
        <el-table :data="page.records" border>
          <el-table-column prop="scoreId" label="成绩编号" ></el-table-column>
          <el-table-column prop="studentId" label="学员编号" ></el-table-column>

          <el-table-column prop="examTypeId" label="考试项目信息编号" >
            <template slot-scope="scope">
              <span>{{ showExamType(scope.row) }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="examTime" label="考试时间"></el-table-column>
          <el-table-column prop="examScore" label="考试成绩" ></el-table-column>
          <el-table-column prop="remarks" label="备注" ></el-table-column>

          <el-table-column prop="scoreId" label="操作">
            <template slot-scope="scope">
              <a href="#" @click="updateStudentScore(scope.row)">修改</a>
              <a href="#" @click="deleteStudentScore(scope.row)">删除</a>
            </template>
          </el-table-column>
        </el-table>
        <!--      分页控件-->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.current"
            :page-sizes="[5, 8, 10, 12]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
          </el-pagination>
        </div>
      </el-main>

      <!--    添加/修改学生对话框-->
      <el-dialog
        title="操作学生成绩表单"
        :visible.sync="insertStudentDialogVisible"
        width="50%"
        :before-close="handleClose">
        <div id="studentScoreChangeForm">
          <span v-if="studentScore.scoreId!=null">成绩编号</span>
          <el-input v-model="studentScore.scoreId" placeholder="成绩编号" v-if="studentScore.scoreId!=null"
                    style="width: 220px"></el-input>
          <br>
          <span>学员编号</span>
          <el-input v-model="studentScore.studentId" placeholder="学员编号" style="width: 220px"></el-input>
          <br>
          <span>考试项目信息编号</span>
          <el-radio v-model="studentScore.examTypeId" label="1" style="width: 120px">JAVA</el-radio>
          <el-radio v-model="studentScore.examTypeId" label="2">C++</el-radio>
          <el-radio v-model="studentScore.examTypeId" label="3">Python</el-radio>
          <br>

          <div class="block">
            <span class="demonstration">考试时间</span>
            <el-date-picker
              v-model="studentScore.examTime"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
          <span>考试成绩</span>
          <el-input v-model="studentScore.examScore" placeholder="考试成绩" style="width: 220px"></el-input>
          <br>
          <span>备注</span>
          <el-input v-model="studentScore.remarks" placeholder="备注" style="width: 220px"></el-input>
          <br>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button @click="studentScoreDialogCancel">取 消</el-button>
        <el-button type="primary" @click="studentScoreDialogCommit">确 定</el-button>
      </span>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import instance from "../../utils/request";

export default {
  name: "StudentScoreInfo",
  data(){
    return{
      page: {//页面对象
        current:1,//当前页码
        size:5,//页面大小
        total:0,//数据总条数
        records:{}//数据
      },
      studentScore:{},//学生分数对象
      paymentDialogVisible: false,//缴费对话框显示
      insertStudentDialogVisible: false//添加、修改学生对话框显示
    }
  },
  methods:{
    showExamType(row, column){
      //展示考试科目信息
      let examType='';
      if (row.examTypeId===1){
        examType='JAVA';
      }else if (row.examTypeId===2){
        examType='C++';
      }else if (row.examTypeId===3){
        examType='Python';
      }
      return examType;
    },
    updateStudentScore(row){
      this.studentScore.scoreId = row.scoreId;
      instance.get("/studentscore/"+row.scoreId).then(res=>{
        this.studentScore = res.data;
      });
      this.insertStudentDialogVisible = true;
    },
    deleteStudentScore(row){
      instance.delete("/studentscore/"+row.scoreId).then(res=>{
        if (res.data>0){
          this.$message("删除学生成绩成功!");
          // this.$router.push({name:'StudentScoreInfo'});//路由跳转
          this.findAllStudentScore();
        }else {
          this.$message("删除学生成绩失败!");
        }
      })
      this.findAllStudentScore();
    },
    findAllStudentScore(){
      instance.get("/studentscore/page/"+this.page.current+"/"+this.page.size).then(res=>{
        this.page = res.data;//查询数据并赋值
      })
    },
    insertStudentScore(){
      this.studentScore = {};
      //insertStudentScoreDialogVisible
      this.insertStudentDialogVisible = true;
    },
    studentScoreDialogCommit(){
      instance.post("/studentscore",this.studentScore).then(res=>{
        if (res.data>0){//受影响行数>0表示成功
          this.$message("操作成功!");
          this.findAllStudentScore();
        }
      });
      this.student = {};//清空表单
      this.insertStudentDialogVisible = false;//关闭对话框
      this.findAllStudentScore();//重新加载学生信息
    },
    studentScoreDialogCancel(){//学生对话框取消
      this.$message("已取消!");
      this.student = {};//清空表单
      this.insertStudentDialogVisible = false;//隐藏弹出窗
    },
    handleSizeChange(val) {//分页控件 改变页面大小时执行
      this.page.size = val;
      instance.get("/studentscore/page/"+this.page.current+"/"+this.page.size).then(res=>{
        this.page.records = res.data.records;
      });
    },
    handleCurrentChange(val) {//分页控件 改变当前页码时执行
      this.page.current = val;
      instance.get("/studentscore/page/"+this.page.current+"/"+this.page.size).then(res=>{
        this.page.records = res.data.records;
      });
    },
    handleClose(done) {//X关闭对话框
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    loginOut(){//退出登录
      instance.get("/user/logout");
      location.reload();
    }
  },
  created() {
    this.findAllStudentScore();
    if (this.$store.state.roleId == 0){
      this.$message('请先登录');
      this.$router.push({name:'Login'});
    }
  }
}
</script>

<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
a {
  color: #42b983;
}
</style>
